<template>
  <div class="search">
    <!-- 头部搜索框 -->
    <div class="header">
      <img src="../../../assets/images/icon/search.png" alt="" />
      <input type="text" v-model="key" @keyup.enter="Search" />
      <button @click="Search">搜索</button>
    </div>

    <!-- 搜索内容 -->
    <div class="content">
      <div class="item" v-for="item of Songs" :key="item.id">
        <img :src="item.album.artist.img1v1Url" alt="" />
        <div class="songs">
          <div class="title">{{ item.name }}</div>
          <p>
            {{ item.album.size }}首，by {{ item.artists[0].name }}，播放{{
              item.mark
            }}次
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: "",
      Songs: [],
    };
  },
  mounted() {
    var { key } = this.$route.params;
    this.key = key;
    console.log(key);
    this.$http(`http://122.112.161.135:3000/search?keywords=${key}`).then(
      (res) => {
        // console.log(res.data.result.songs);
        this.Songs = res.data.result.songs;
      }
    );
  },
  methods: {
    Search() {
      this.$http(`http://122.112.161.135:3000/search?keywords=${this.key}`).then(
        (res) => {
            this.Songs = res.data.result.songs
        }
      );
    },
  },
};
</script>

<style scoped>
.header {
  height: 2rem;
  background-color: #3b393a;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.header input {
  height: 1.2rem;
  width: 6rem;
  border-radius: 0.6rem;
  outline: none;
  border: none;
  padding-left: 1rem;
  box-sizing: border-box;
  font-size: 0.4rem;
  font-weight: 800;
}
.header button {
  height: 1.2rem;
  width: 2rem;
  border-radius: 0.6rem;
  background-color: #fff;
  margin-left: 0.5rem;
}
.header img {
  position: absolute;
  width: 0.4rem;
  left: 1.2rem;
}
.item {
  display: flex;
  padding: 0.3rem;
  align-items: center;
}
.item img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.3rem;
  margin-right: 0.3rem;
}
.item .title {
  font-size: 0.4rem;
  margin-bottom: 0.2rem;
}
</style>